<template>

	<div class="container">
		<table>
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>操作</th>
			</tr>
			<tr v-for="(obj,index) in arr">
				<td>{{obj.userId}}</td>
				<td>{{obj.userName}}</td>
				<td>{{obj.userAge}}</td>

				<td><button @click="del(index)" >删除--{{index}}</button></td>
			</tr>
			<tr>
				<td><button  @click="clearAll()">清空</button></td>
			</tr>
		</table>
		
		
		
		<hr>
		<h4>v1</h4>
		
		<form>
			
			
			<h3>添加</h3>
			userId：<input type="text" v-model="userId" ><br>
			姓名：<input type="text" v-model="userName" ><br>
			年龄：<input type="text" v-model="userAge" ><br>
			<button @click="addForm()" type="button" >添加</button>
		</form>`

		<hr>
		<h3>v2 </h3>
		<form>
			
			
			<h3>添加</h3>
			userId：<input type="text" v-model="user.userId" ><br>
			姓名：<input type="text" v-model="user.userName" ><br>
			年龄：<input type="text" v-model="user.userAge" ><br>
			<button @click="addForm2()" type="button" >添加</button>
		</form>

	</div>


</template>

<script>
	export default {
		name: 'Train',
		data() {
			return {
				userId:'',
				userName:'',
				userAge:'',
				
				user:{
					userId:'',
					userName:'',
					userAge:''
				},
				
				arr:[
					{userId:'1',userName:'admin',userAge:90},
					{userId:'2',userName:'admin',userAge:90},
					{userId:'3',userName:'admin',userAge:90},
					{userId:'4',userName:'admin',userAge:90},
					{userId:'5',userName:'admin',userAge:90},
					{userId:'6',userName:'admin',userAge:90},

				]
			}
		},
		methods:{
			del(index){
				alert('del')
				// slice 切片        
				// splice
				this.arr.splice(index,1)
			},
			clearAll(){
				const len = this.arr.length ;
				this.arr.splice(0,len)
				// this.arr = [];
			},
			addForm(){
				let user = {userId:this.userId,userName:this.userName,userAge:this.userAge};
				console.log(user);
				this.arr.push(
					user
				)
				
			},
			addForm2(){
				this.arr.push( this.user )
				
			}
		}
	}
</script>

<style scoped>
	.container {

		margin: 50px;

	}
	 table{
			width: 100%;
			border-collapse: collapse;
		}
		table tr th,table tr td{
			height: 35px;
			border-bottom: solid 1px #999;
			text-align: center;
		}
		.clear-btn{
			text-align: right;
		}
</style>